<template>
  <div class="hot">
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="2000" indicator-color="white">
        <van-swipe-item v-for="(item,idx) in swipe_picUrl" :key="idx">
          <img :src="item.imageUrl" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <h2 class="hot-nav">推荐歌单</h2>
    <div class="hot-box">
      <!-- 图片列表模板 -->
      <ul class="hot-list-box">
        <li class="hot-list" v-for="(item,idex) in recommend_list" :key="idex"  @click="qweclick(item.name,item.picUrl,item.id)">
          <div class="list-pic">
            <img :src="item.picUrl" />
            <span></span>
          </div>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <!-- 图片列表模板 -->

    <h2 class="hot-nav">最新音乐cool</h2>
    <div class="new-box">
      <!-- 最新音乐列表 -->
      <!-- song组件 -->
      <song
        v-for="(item,idx) in new_song"
        :key="idx"
        :song_data="{
          name:item.name,
          ar:item.song.artists[0].name,
          al:item.song.album.name,
          id:item.song.id
        }"
        @play="play_music"
      ></song>
      <!-- song组件 -->
      <!-- 最新音乐列表 -->
    </div>
  </div>
</template>
<script>
import song from "../components/song";
export default {
  name: "Recommend",
  components: {
    song
  },
  data() {
    return {
      recommend_list: null,
      swipe_picUrl: null,
      new_song: null
    };
  },
  //axios请求数据
  async created() {
    let res = await this.$axios(
      "https://netease.bluej.cn/personalized?limit=6"
    );
    this.recommend_list = res.data.result;
    console.log(this.recommend_list);

    let banner = await this.$axios("https://netease.bluej.cn/banner");
    // console.log(banner.data.banners);
    this.swipe_picUrl = banner.data.banners;
    // console.log(this.swipe_picUrl);

    let newsong = await this.$axios(
      "https://netease.bluej.cn/personalized/newsong"
    );
    // console.log(newsong.data.result);
    this.new_song = newsong.data.result;
    // console.log("shuju", this.new_song);
  },
  methods: {
    qweclick(name, picture, id) {
      this.$router.push({
        path: "/profile",
        query: {
          musicName: name,
          musicPicture: picture,
          myId: id
        }
      });
    },
    // 点击选中的歌名跳转页面并播放音乐
    async play_music(name, id) {
      let res = await this.$axios(`https://netease.bluej.cn/song/url?id=${id}`);
      // this.mic_url = res.data.data[0].url
      console.log("播放音乐", name, id);
      // console.log(this.mic_url)
      // 跳转路由到 item 播放音乐
      this.$router.push({
        name: "item",
        params: {
          src: res.data.data[0].url
        }
      });
    }
  }
};
</script>
<style lang="scss">
.swipe {
  margin: 5px;
  .my-swipe .van-swipe-item {
    > img {
      width: 100%;
      border-radius: 10px;
    }
    color: #fff;
    font-size: 0;
    // line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
}

.hot-nav {
  text-align: left;
  line-height: 17px;
  font-size: 17px;
  border-left: 2px solid #d33a31;
  padding-left: 5px;
  margin: 10px 0;
}

.hot-box {
  margin: 0 5px;
}
.hot-list-box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.hot-list {
  width: 32%;
}

.hot-list p {
  height: 33px;
  font-size: 13px;
  overflow: hidden;
  margin-bottom: 10px;
  text-align: left;
}

.list-pic {
  width: 100%;
}

.list-pic img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}
.new-box {
  text-align: left;
}
</style>

